import { useState } from 'react'
import Taro, { FC } from '@tarojs/taro' 
import { View, Image, Button } from '@tarojs/components'
import TaroCropper from 'taro-cropper-v3';

//图片裁剪
export const Cropper: FC = () => {

    const [src, setSrc] = useState("");
    const [cutImagePath, setCutImagePath] = useState("");
    const [taroCropper, setTaroCropper] = useState(new TaroCropper(null))

    const catTaroCropper = (node: TaroCropper) => {
        setTaroCropper(node);
      }
    return(
        <View className='index'>
            <TaroCropper
              height={1000} src={src}
              cropperWidth={400}
              cropperHeight={400}
              ref={catTaroCropper}
              fullScreen
              onCut={res => {
            setCutImagePath(res)
          }}
              hideCancelText={false}
              onCancel={() => {
            Taro.showToast({
              icon: 'none',
              title: '点击取消'
            })
          }}
            />
        <Button onClick={() => {
          Taro.chooseImage({
            count: 1
          })
            .then(res => {
              setSrc(res.tempFilePaths[0]);
            })
        }}
        >选择图片</Button>
        <Button onClick={() => {
          taroCropper && taroCropper.cut()
            .then(res => {
              setCutImagePath(res.filePath)
              console.log(res);
            })
            .catch(err => {
              console.log(err);
            })
        }}
        >裁剪</Button>
        <Image
          src={cutImagePath}
          mode='widthFix'
          style={{
            width: Taro.pxTransform(400),
            height: Taro.pxTransform(400)
          }}
        />
        </View>
    )
}
export default Cropper